import React, {useState} from "react";
import {
  Button,
  Modal,
  ModalBody,
  ModalFooter,
  ModalHeader
} from "reactstrap";

const Artists = props => {
  const {setIsArtists, isArtists, data} = props

  return (
    <Modal
      isOpen={isArtists}
      toggle={() => setIsArtists(false)}
      size="md"
    >
      <ModalHeader toggle={() => setIsArtists(false)}>Артисты</ModalHeader>
      <ModalBody>
        <div>
          {data.divider_artists && data.divider_artists.map((value, id) => {
            return <div key={id} className="d-flex h-100 mt-2">
              <span className="artist-divide-name flex-grow-1 flex-shrink-1 p-1">{value}</span>
            </div>
          })
          }
        </div>
      </ModalBody>
      <ModalFooter>
        <Button.Ripple
          color="danger"
          type="submit"
          onClick={() => setIsArtists(false)}
        >
          Закрыть
        </Button.Ripple>
      </ModalFooter>
    </Modal>
  )
}

export default Artists;
